<template>
  <div class="social-wrapper">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-alert
            center
            type="info"
            show-icon
            class="custom-class"
            :title="`本月社保在缴 公积金在缴 增员 减员 入职 离职`"
            :closable="false"
          />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-button type="danger" size="small">历史归档</el-button>
          <el-button type="primary" size="small">202003报表</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="department-wrapper">
      <!-- 部门列表部分 -->
      <div class="content">
        <div class="title">部门</div>
        <div class="item">
          <el-checkbox-group
            v-model="departmentChecks"
            @change="getSocialSecuritysList"
          >
            <el-checkbox
              v-for="dept in departmentList.depts"
              :key="dept.id"
              class="item"
              :label="dept.id"
            >
              {{ dept.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="content">
        <div class="title">社保城市</div>
        <el-checkbox-group
          v-model="socialSecurityChecks"
          @change="getSocialSecuritysList"
        >
          <el-checkbox
            v-for="city in cityList"
            :key="city.id"
            class="item"
            :label="city.id"
          >
            {{ city.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="content">
        <div class="title">公积金城市</div>
        <el-checkbox-group
          v-model="providentFundChecks"
          @change="getSocialSecuritysList"
        >
          <el-checkbox
            v-for="city in cityList"
            :key="city.id"
            class="item"
            :label="city.id"
          >
            {{ city.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="table-wrapper">
      <!-- 中间表格部分 -->
      <custom-table
        :data="socialSecuritysList.rows"
        :columns="columns"
        :current-page.sync="pageInfo.page"
        :page-size.sync="pageInfo.pageSize"
        :total="socialSecuritysList.total"
        @update:currentPage="onPageChange"
        @update:pageSize="onPageSizeChange"
      >
        <template v-slot="{ col }">
          <template v-if="col.prop === 'op'">
            <el-button type="text" size="mini">查看详情</el-button>
          </template>
        </template>
      </custom-table>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      // 部门选中列表
      departmentChecks: [],
      // 公积金城市选中列表
      providentFundChecks: [],
      // 社保城市选中列表
      socialSecurityChecks: [],
      // 表格组件传参
      currentPage: 1,
      pageSize: 10,
      columns: [
        {
          label: '序号',
          // 没有prop的时候 显示索引
          width: 100
        },
        {
          label: '姓名',
          prop: 'username',
          sortable: true
        },
        {
          label: '手机',
          prop: 'mobile',
          sortable: true
        },
        {
          label: '工号',
          prop: 'workNumber',
          sortable: true
        },
        {
          label: '部门',
          prop: 'departmentName',
          sortable: true
        },
        {
          label: '入职时间',
          prop: 'timeOfEntry',
          sortable: true
        },
        {
          label: '离职时间',
          prop: 'leaveTime',
          sortable: true
        },
        {
          label: '社保城市',
          prop: 'participatingInTheCity'
        },
        {
          label: '公积金城市',
          prop: 'providentFundCity'
        },
        {
          label: '社保基数',
          prop: 'socialSecurityBase'
        },
        {
          label: '公积金基数',
          prop: 'providentFundBase'
        },
        {
          label: '操作',
          prop: 'op',
          needSlot: true
        }
      ]
    }
  },
  computed: {
    ...mapState('social-security', ['socialSecuritysList', 'cityList']),
    ...mapState('staff-management', ['departmentList'])
  },
  methods: {
    ...mapActions('social-security', ['updateSocialSecuritysList', 'updateCityList']),
    ...mapActions('staff-management', ['updateDepartmentList']),
    // 获取社保列表
    getSocialSecuritysList() {
      this.updateSocialSecuritysList({
        page: this.pageInfo.page,
        pageSize: this.pageInfo.pageSize,
        departmentChecks: this.departmentChecks,
        providentFundChecks: this.providentFundChecks,
        socialSecurityChecks: this.socialSecurityChecks
      })
    },
    // 分页切换
    onPageChange(currentPage) {
      this.updateSocialSecuritysList({
        page: currentPage,
        pageSize: this.pageInfo.pageSize
      })
    },
    // 获取社保列表
    onPageSizeChange(pageSize) {
      this.updateSocialSecuritysList({
        page: 1,
        pageSize: pageSize
      })
    }
  },
  created() {
    // 获取所有社保列表
    this.updateSocialSecuritysList({
      page: this.pageInfo.page,
      pageSize: this.pageInfo.pageSize
    })
    // 获取所有部门列表
    this.updateDepartmentList()
    // 获取城市列表
    this.updateCityList()
  }
}
</script>
<style lang="scss" scoped>
.social-wrapper {
  padding: 0 16px;
  box-sizing: border-box;
  .custom-class {
    width: 330px;
    background-color: #e6f7ff;
    color: #409eff;
  }
  .el-row {
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  .bg-purple-light {
    justify-content: flex-end;
  }
  .bg-purple-light,
  .bg-purple {
    display: flex;
    align-items: center;
  }
  .bg-purple-dark {
    align-items: flex-start;
  }
  .grid-content {
    min-height: 60px;
  }
  .change-width {
    width: 300px;
  }
  .table-wrapper,
  .department-wrapper {
    margin-top: 12px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .department-wrapper {
    color: #666;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    .content {
      display: flex;
      margin: 16px;
      .title {
        width: 80px;
        text-align: right;
        margin-right: 8px;
        line-height: 24px;
      }
      .item {
        flex: 1;
        line-height: 24px;
      }
    }
  }
}
</style>
